<template >
  <div
    :class="[`class${dropType} box-height`]"
    :style="{ width: width + 'px' }"
    @click="visabled=!visabled"
    id='drop'
  >
    <div class="title">
      <span :class="['title-sub', customTitleSub]">{{ text }}</span>
      <div
        :class="[
          'iconBase',
          { arrow: customIcon },
          classIcon,
        ]"
      >
        <div  :class="['classIcon',{ rotate: visabled }]"><slot name="arrow"></slot></div>
        <slot name='otherDecorate'></slot>
      </div>
      <slot name="titleContext"></slot>
    </div>
     <slot name="decorate"></slot>      
    <ul class="context" v-show="visabled">
      <li
        v-for="(item, index) in list"
        :key="item + index"
        @click.stop="handlerSelect(item, index)"
        :style="{
          backgroundColor:
            value === item[valueKey] ? 'rgba(12,137,144,.8)' : '',
        }"
      >
        {{ item[nameKey] }}
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "data-v-dropdown",
  props: {
    dropType: {
      type: [Number, String],
      default: 1,
    },
    width: {
      type: [Number, String],
      default: 140,
    },
    list: {
      type: Array,
      default: () => [],
    },
    customIcon: {
      type: Boolean,
      default: true,
    },
    nameKey: {
      type: String,
      default: "name",
    },
    valueKey: {
      type: String,
      default: "value",
    },
    customTitleSub: {
      type: String,
      default: "",
    },
    classIcon: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      visabled: false,
      text: "请选择",
      value: "",
    };
  },
  methods: {
    closeDrop(e) {
      this.visabled=false;
    },
    handlerSelect(item, index) {
      this.text = item[this.nameKey];
      this.value = item[this.valueKey];
      this.visabled=false;
      this.$emit("change", { value: item[this.valueKey], index, item });
    },
  },
  mounted() {
    document.addEventListener("click", this.closeDrop,true);
  },
  destroyed() {
    document.removeEventListener("click", this.closeDrop);
  },
};
</script>
<style src='./index.css' scoped></style>
